<ul class="nav nav-tabs " role="tablist">
  @foreach($cabinetNav as $oneCabinetNav)
  <li class="nav-item">
      <a href="{{ $oneCabinetNav['url'] }}" class="nav-link {{ $oneCabinetNav['active'] }}" data-toggle="tab">{{ $oneCabinetNav['name'] }}</a>
  </li>
  @endforeach
  <li class="nav-item pull-right header"></li>
</ul>
<div style="display:flex;">
  <div class="left" id="tabs1" >
  <ul class="nav nav-tabs nav-left flex-column" role="tablist">
    @foreach($pointNav as $onePointNav)
    <li class="nav-item">
        <a href="{{ $onePointNav['url'] }}" class=" nav-link {{ $onePointNav['active'] }}" data-toggle="tab">{{ $onePointNav['name'] }}</a>
    </li>
    @endforeach
    <li class="nav-item pull-right header"></li>
  </ul>
  </div>
  <div class="right" style="width:89%;">
    <div style="width:100%;height:120px;display:flex;justify-content:space-evenly;">
      <div style="width:18.1%;height:120px;background-image:url('/icon/max.png');" >
        <div style="margin-left:31px;margin-top:22px;color:#FFFFFF;font-size:14.69px;">最大值</div>
        <div style="margin-left:30px;margin-top:17px;color:#FFFFFF;font-size:39.18px;">{{ $headerData['max'] }}</div>
      </div>
      <div style="width:18.1%;height:120px;background-image:url('/icon/min.png');" >
        <div style="margin-left:31px;margin-top:22px;color:#FFFFFF;font-size:14.69px;">最小值</div>
        <div style="margin-left:30px;margin-top:17px;color:#FFFFFF;font-size:39.18px;">{{ $headerData['min'] }}</div>
      </div>
      <div style="width:18.1%;height:120px;background-image:url('/icon/time.png');" >
        <div style="margin-left:31px;margin-top:22px;color:#FFFFFF;font-size:14.69px;">实时</div>
        <div style="margin-left:30px;margin-top:17px;color:#FFFFFF;font-size:39.18px;" id="{{ $alias }}-now">{{ $headerData['now'] }}</div>
      </div>
      <div style="width:18.1%;height:120px;background-image:url('/icon/avg.png');" >
        <div style="margin-left:31px;margin-top:22px;color:#FFFFFF;font-size:14.69px;">均值</div>
        <div style="margin-left:30px;margin-top:17px;color:#FFFFFF;font-size:39.18px;">{{ $headerData['avg'] }}</div>
      </div>
      <div style="width:18.1%;height:120px;background-image:url('/icon/alm.png');" >
        <div style="margin-left:31px;margin-top:22px;color:#FFFFFF;font-size:14.69px;">未处理</div>
        <div style="margin-left:30px;margin-top:17px;color:#FFFFFF;font-size:39.18px;">0</div>
      </div>
    </div>
    <div id="echart" style="width:100%;height:30rem;"></div>
  </div>
</div>
<script src="{{ admin_asset('echarts/echarts.common.min.js')}}"></script>
<script type="text/javascript">
    Dcat.ready(function () {
        var xData = {!! $chartData['xData'] !!};
        var yData = {!! $chartData['yData'] !!};
        var title = {text: '{{ $cabinet['name'] }}'};
        var tooltip = {trigger: 'axis'};
        var dataZoom = [
            {startValue: '{{ $chartData['startValue'] }}'},
            {type: 'inside'},
        ];

        var myChart = echarts.init(document.getElementById('echart'));
        var option;

        option = {
        title: title,
        tooltip: tooltip,
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: yData,
            type: 'line'
            }
        ],
        dataZoom: dataZoom
        };

        myChart.setOption(option);


        //分段取数据
        initChart({{ $page }})
        function initChart(nowPage) {
          nowPage++;
          let url = "{{ URL::asset('admin/initCabinetMonitorChart') }}";
            let data = {
                _token: '{{ csrf_token() }}',
                cabinetId: {{ $cabinet['id'] }},
                recordType: {{ $cabinet['record_type'] }},
                alias: '{{ $alias }}',
                start: {{ $start }},
                end: {{ $end }},
                page: nowPage,
            }
            $.ajax({
                type : "POST",
                url : url,
                data : data,
                success : function(result) {
                    console.log(result)
                    if (result.code == 1) {
                        xData = xData.concat(result.data.xData)
                        yData = yData.concat(result.data.yData)                        
                        myChart.setOption({
                          title: title,
                          tooltip: tooltip,
                          xAxis: {
                              type: 'category',
                              data: xData
                          },
                          yAxis: {
                              type: 'value'
                          },
                          series: [
                              {
                              data: yData,
                              type: 'line'
                              }
                          ],
                          dataZoom: dataZoom
                        });
                        initChart(result.data.page);
                    } else {
                        setTimeout(pollingCabinetMonitorData, 1000*{{ $autoRefresh }});
                        console.log(result.msg)
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    layer.close(e);
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }

        //轮循
        function pollingCabinetMonitorData() {
            if (window.parent.location.href.indexOf('cabinet-monitor') < 0) {
              return;
            }
            setTimeout(pollingCabinetMonitorData, 1000*{{ $autoRefresh }});

            let url = "{{ URL::asset('admin/pollingCabinetMonitorData') }}";
            let data = {
                _token: '{{ csrf_token() }}',
                cabinetId: {{ $cabinet['id'] }},
                alias: '{{ $alias }}'
            }
            $.ajax({
                type : "POST",
                url : url,
                data : data,
                success : function(result) {
                    if (result.code == 1) {
                        console.log(result.data);
                        xData = xData.concat(result.data.xData)
                        yData = yData.concat(result.data.yData)                        
                        myChart.setOption({
                          title: title,
                          tooltip: tooltip,
                          xAxis: {
                              type: 'category',
                              data: xData
                          },
                          yAxis: {
                              type: 'value'
                          },
                          series: [
                              {
                              data: yData,
                              type: 'line'
                              }
                          ],
                          dataZoom: dataZoom
                        });
                        $("#"+result.data.alias+"-now").html(result.data.now);
                    } else {
                        console.log(result.msg)
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    layer.close(e);
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }
    });
</script>
